import React from 'react';
import axios from 'axios';
import { lunbo } from './../../api';

class Carouse extends React.Component {
	constructor(props) {
	  super(props);
	  this.state = {carouses:[],box:'',number:0,index:0};
	}

	componentDidMount() {
		//const url = "http://control.maksdu.com/carouse/getshow";
		lunbo().then(res=>{
			this.setState({
				carouses: res.content.slice(0,6),
				number:res.content.length 
			});

			this.timerID = setInterval(
				() => this.tick(),
				3000
			);
		})
	}

	componentWillUnmount() {
		clearInterval(this.timerID);
	}

	tick() {
		const value = this.state.index+1;
		this.setState({
			index:value===this.state.number?0:value 
		});
	}

	handleMouseOver(cindex,e) {
		this.setState({
			index:cindex,
		})
	}

	render() {
		return (
			<div className="wpl">
				<div className="carouse_box" >
					{
						this.state.carouses.map((data,index)=>
							(<div key={index} id={"image_"+index} className={index===this.state.index?'image in':'image out'} >
								<a href={data.targetLink}>
									<img className="full" src={data.pictureName} width="500" height="290" target="_blank" alt={data.title}/>
								</a>
								<div className='word'>
									<h3><a href={data.targetLink}>{data.title}</a></h3>
									<p>{data.context}</p>
								</div>
							</div>)
							)
					}
				</div>
				<div className="thumbs">
					<ul className="clickdown">
						{
							this.state.carouses.map((img,index)=>
								(
									<li key={img.id} onMouseOver={this.handleMouseOver.bind(this,index)} className="showItem">
										<a href="javascript:" className={this.props.index===index?"current":""}>
											<img src={img.pictureName} width="78" height="37"/>
										</a>
									</li>
								)
							)
						}
					</ul>
				</div>
			</div>
		)
	}
}

export default Carouse;